<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
        margin: 0;
        padding: 0;
         box-sizing:border-box 
        }
        .box {
            height: 40px;
            border-top: 1px solid #ccc;     
            border-bottom: 1px solid #ccc;  }
         .w{
            width: 1200px;
            margin: 0 auto;                        
         }
         ul{
            width: 100%;
            list-style: none;}
         li{
            float: left;
            width: 240px;
            height: 40px;
            line-height: 40px;
            text-align: center;              
        }
        .l1{
            border-right: 1px solid #ccc ;
        }
        .l2{
            border-right: 1px solid #ccc ;
        }
        .l3{
            border-right: 1px solid #ccc ;
        }
        .l4{            
            border-right: 1px solid #ccc ;       
        }
        .l5{ border-right: none;}
        ul li a {
      display: block;
      height: 40px;
      text-decoration: none;
      color: #000;
    }
    .die{
        position: relative;
    }
    .er{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 41px;
        display: none;
    }
    .die:hover img{
        display: block;
    }
         

    </style>
</head>
<body>
    <div class="box">
       <div class="w">
        <ul>
            <li><a href="" class="l1">我要投资</a></li>
            <li><a href="" class="l2">平台介绍</a></li>
            <li><a href="" class="l3">新手专区</a></li>
            <li class="die">
                <a href="" class="l4">手机微金所</a>
                <img src="./code.jpg" class="er">
            </li> 
            <li><a href="" class="l5">个人中心</a></li>
        </ul>
        </div>
    </div>
    
</body>
</html>